<template>
	<div style="cursor: url('/scr/assets/giveLove.ico')" v-bind:class="{ dark: drakModel,light:!drakModel  }" @click="light">
		<h1 class="title" @click="light" data-text="王一博 我爱你">王一博 我爱你</h1>
		<h2 class="small_title">Yi<spam>⚡</spam>bo</h2>
	</div>
	<div class="bottom">
		<div class="beian" @click="moveToBaiAn">
			<span>渝ICP备2020011661号-1</span>
		</div>
	</div>
	<!-- <img src="../assets/yibo.png" /> -->
</template>

<script>
	export default {
		name: 'mainPage',
		data() {
			return {
				drakModel: true //1.dark
			}
		},
		methods: {
			light: function() {
				console.log("change");
				this.drakModel = false;
				let that = this;
				setTimeout(function() {
					that.drakModel = true;
				}, 5000)
			},
			moveToBaiAn: function() {
				window.open("https://beian.miit.gov.cn/渝ICP备2020011661号-1");
			}
		}
	}
</script>

<style lang="scss">
	@import url('https://fonts.googleapis.com/css?family=Pirata+One|Rubik:900');

	* {
		-webkit-touch-callout: none;
		/*系统默认菜单被禁用*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-khtml-user-select: none;
		/*早期浏览器*/
		-moz-user-select: none;
		/*火狐*/
		-ms-user-select: none;
		/*IE10*/
		user-select: none;
	}

	body {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background-color: #141E30;
		background: linear-gradient(to right, #24243e, #141E30, #0f0c29);

		.header {
			cursor: url("/scr/assets/giveLove.ico");
		}

		.light {
			.title {
				& {
					text-transform: Uppercase;
					margin-bottom: .5em;
					font-family: 'Rubik', sans-serif;
					font-size: 6rem;
					color: #00aaff;
				}

				& {
					position: relative;
					background: linear-gradient(to right, #ff0000, #ffaa00, #aa007f);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&:before,
				&:after {
					content: attr(data-text);
					position: absolute;
					top: 0;
					left: 0;
				}

				&:before {
					z-index: -1;
					text-shadow: -0.001em -0.001em 1px rgba(255, 255, 255, .15)
				}

				&:after {
					z-index: -2;
					text-shadow: 10px 10px 10px rgba(0, 0, 0, .5), 20px 20px 20px rgba(0, 0, 0, .4), 30px 30px 30px rgba(0, 0, 0, .1);
					mix-blend-mode: multiply;
				}

			}

			.small_title {
				& {
					margin-top: -1.15em;
					font-family: 'Pirata One', cursive;
					font-size: 3rem;
					color: #aaff7f;

					text-align: center;
				}

				spam {
					font-size: .5em;
				}
			}
		}

		.dark {
			.title {
				& {
					text-transform: Uppercase;
					margin-bottom: .5em;
					font-family: 'Rubik', sans-serif;
					font-size: 6rem;
					color: #E4E5E6;
				}

				& {
					position: relative;
					background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				&:before,
				&:after {
					content: attr(data-text);
					position: absolute;
					top: 0;
					left: 0;
				}

				&:before {
					z-index: -1;
					text-shadow: -0.001em -0.001em 1px rgba(255, 255, 255, .15)
				}

				&:after {
					z-index: -2;
					text-shadow: 10px 10px 10px rgba(0, 0, 0, .5), 20px 20px 20px rgba(0, 0, 0, .4), 30px 30px 30px rgba(0, 0, 0, .1);
					mix-blend-mode: multiply;
				}

			}

			.small_title {
				& {
					margin-top: -1.15em;
					font-family: 'Pirata One', cursive;
					font-size: 3rem;
					// color: #F7971E;
					// color: ;
					color: rgba($color: #00557f, $alpha: 0.5);
					text-align: center;
				}

				spam {
					font-size: .5em;
				}
			}
		}


		.light {}

		.bottom {
			position: absolute;
			text-align: center;
			// top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			bottom: 0;

			.beian {
				font-size: 0.875rem;
				cursor: pointer;
			}
		}
	}
</style>
